<template>
	<view>
		<!--rate.wxml-->
		<view class='table'>
		  <view class='tr'>
			<view class='th'>期限</view>
			<view class='th'>商贷利率(%)</view>
			<view class='th'>公积金贷利率(%)</view>
		  </view>
		  <block v-for="(item, item1) in table">
			<view class='tr'>
			  <view class='td'>{{item.year}}</view>
			  <view class='td'>{{item.commercial}}</view>
			  <view class='td'>{{item.providentFund}}</view>
			</view>
		  </block>
		</view>
		<view class='text'>以上数据为2016年央行公布的最新贷款利率</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				table: [{
				      year: "6个月",
				      commercial: "4.35",
				      providentFund: "2.75"
				    }, {
				      year: "1年",
				      commercial: "4.35",
				      providentFund: "2.75"
				    }, {
				      year: "1-3年(含)",
				      commercial: "4.75",
				      providentFund: "2.75"
				    }, {
				      year: "3-5年(含)",
				      commercial: "4.75",
				      providentFund: "2.75"
				    }, {
				      year: "5年以上",
				      commercial: "4.90",
				      providentFund: "3.25"
				    }],
			};
		},
		 /**
		   * 生命周期函数--监听页面加载
		   */
		  
	}
</script>

<style lang="less">
/**rate.wxss**/
page{
  background: #F8F8FF
}
.table{
  display: flex;
  flex-direction: column;
  font-size: 24rpx;
  margin-top: 30rpx;
}
.tr{
  display: flex;
  justify-content: center;
}
.th{
  background-image: linear-gradient(135deg, #F44336 10%, #FF9800 100%);
  color: #fff;
}
.th,.td{
  flex-basis: 32%;
  text-align: center;
  line-height: 64rpx;
  box-sizing: border-box;
}
.td{
  border: 1rpx solid #e5e5e5;
  border-top: 0;
  border-right: 0;
  color: #333;
  background: #fff;
}
.tr .td:last-child{
  border-right: 1rpx solid #e5e5e5;
}
.text{
  color: #aaa;
  font-size: 20rpx;
  text-indent: 2em;
  line-height: 60rpx;
}
</style>